<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智慧拌合站-消耗</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="shortcut icon" href="https://g.csdnimg.cn/static/logo/favicon32.ico" type="image/x-icon">
    <style>
        .el-select .el-input {
            width: 130px;
        }

        * {
            margin: 0;
            padding: 0;
        }

        .in {
            background: url(./static/img/input.png) no-repeat;
            background-size: 100% 100%;
            border: none;
            outline: none;
            width: 304px;
            height: 64px;
            font-size: 18px;
            font-weight: 400;
            color: #FFFFFF;
        }

        .p_text {
            font-size: 20px;
            font-weight: 400;
            color: #00F6FF;
            margin: 5px 0px;
        }

        #index {
            background: url(./static/img/bg.png) no-repeat;
            background-size: 100% 100%;
            width: 100%;
            height: 100vh;
        }

        .block {
            display: inline-block;
            margin: 0px 36px;
            margin-bottom: 20px;
        }
    </style>
</head>

<body>
    <div id="index">

        <div class="block" style="margin-top: 170px;">
            <p class="p_text">混凝土编号</p>
            <input type="text" v-model="form.betonId" class="in">
        </div>
        <div class="block">
            <p class="p_text">1#料仓(5-16mm)</p>
            <input type="text" v-model="form.warehouseA" class="in">
        </div>
        <div class="block">
            <p class="p_text">2#料仓(5-16mm)</p>
            <input type="text" v-model="form.warehouseB" class="in">
        </div>
        <div class="block">
            <p class="p_text">3#料仓(16-31.5mm)</p>
            <input type="text" v-model="form.warehouseC" class="in">
        </div>
        <div class="block">
            <p class="p_text">4#料仓(16-31.5mm)</p>
            <input type="text" v-model="form.warehouseD" class="in">
        </div>
        <div class="block">
            <p class="p_text">5#仓库</p>
            <input type="text" v-model="form.warehouseE" class="in">
        </div>
        <div class="block">
            <p class="p_text">6#仓库</p>
            <input type="text" v-model="form.warehouseF" class="in">
        </div>
        <div class="block">
            <p class="p_text">7#料仓(5-10mm)</p>
            <input type="text" v-model="form.warehouseG" class="in">
        </div>
        <div class="block">
            <p class="p_text">8#料仓(5-10mm)</p>
            <input type="text" v-model="form.warehouseH" class="in">
        </div>
        <div class="block">
            <p class="p_text">9#料仓(10-20mm)</p>
            <input type="text" v-model="form.warehouseI" class="in">
        </div>
        <div class="block">
            <p class="p_text">10#仓库(10-20mm)</p>
            <input type="text" v-model="form.warehouseJ" class="in">
        </div>
        <div class="block">
            <p class="p_text">粉煤灰1-1</p>
            <input type="text" v-model="form.coalA" class="in">
        </div>
        <div class="block">
            <p class="p_text">粉煤灰1-2</p>
            <input type="text" v-model="form.coalB" class="in">
        </div>
        <div class="block">
            <p class="p_text">粉煤灰2-1</p>
            <input type="text" v-model="form.coalC" class="in">
        </div>
        <div class="block">
            <p class="p_text">粉煤灰2-2</p>
            <input type="text" v-model="form.coalD" class="in">
        </div>
        <div class="block">
            <p class="p_text">水泥1-1</p>
            <input type="text" v-model="form.cementAa" class="in">
        </div>
        <div class="block">
            <p class="p_text">水泥1-2</p>
            <input type="text" v-model="form.cementAb" class="in">
        </div>
        <div class="block">
            <p class="p_text">水泥1-3</p>
            <input type="text" v-model="form.cementAc" class="in">
        </div>
        <div class="block">
            <p class="p_text">水泥1-4</p>
            <input type="text" v-model="form.cementAd" class="in">
        </div>
        <div class="block">
            <p class="p_text">水泥1-5</p>
            <input type="text" v-model="form.cementAe" class="in">
        </div>
        <div class="block">
            <p class="p_text">水泥1-6</p>
            <input type="text" v-model="form.cementAf" class="in">
        </div>
        <div class="block">
            <p class="p_text">水泥1-7</p>
            <input type="text" v-model="form.cementAg" class="in">
        </div>
        <div class="block">
            <p class="p_text">水泥2-1</p>
            <input type="text" v-model="form.cementBa" class="in">
        </div>
        <div class="block">
            <p class="p_text">水泥2-2</p>
            <input type="text" v-model="form.cementBb" class="in">
        </div>
        <div class="block">
            <p class="p_text">水泥2-3</p>
            <input type="text" v-model="form.cementBc" class="in">
        </div>
        <div class="block">
            <p class="p_text">水泥2-4</p>
            <input type="text" v-model="form.cementBd" class="in">
        </div>
        <div class="block">
            <p class="p_text">水泥2-5</p>
            <input type="text" v-model="form.cementBe" class="in">
        </div>
        <div class="block">
            <p class="p_text">水泥2-6</p>
            <input type="text" v-model="form.cementBf" class="in">
        </div>
        <div class="block">
            <p class="p_text">水泥2-7</p>
            <input type="text" v-model="form.cementBg" class="in">
        </div>
        <div class="block">
            <p class="p_text">外加剂</p>
            <input type="text" v-model="form.additive" class="in">
        </div>
        <div style="margin-right: 55px;float: right;">
            <el-button type="primary" @click="onSubmit()">立即创建</el-button>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
    <script src="https://unpkg.com/axios@0.21.1/dist/axios.min.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script type="text/javascript">
        const vm = new Vue({
            el: '#index',
            data: {
                form: {
                    betonId: "",
                    warehouseA: "",
                    warehouseB: "",
                    warehouseC: "",
                    warehouseD: "",
                    warehouseE: "",
                    warehouseF: "",
                    warehouseG: "",
                    warehouseH: "",
                    warehouseI: "",
                    warehouseJ: "",
                    coalA: "",
                    coalB: "",
                    coalC: "",
                    coalD: "",
                    cementAa: "",
                    cementAb: "",
                    cementAc: "",
                    cementAd: "",
                    cementAe: "",
                    cementAf: "",
                    cementAg: "",
                    cementBa: "",
                    cementBb: "",
                    cementBc: "",
                    cementBd: "",
                    cementBe: "",
                    cementBf: "",
                    cementBg: "",
                    additive: ""
                }
            },
            methods: {
                onSubmit() {
                    for (let key in this.form) {
                        if (this.form[key] == "") {
                            this.form[key] = "0";
                        }
                    }
                    axios.post('http://101.132.154.10:8999/Consume/InsertConsume', this.form).then((res) => {
                        console.log(res);

                        this.$message({
                            message: res.data.message,
                            type: 'success'
                        });
                        this.form = {
                            betonId: "",
                            warehouseA: "",
                            warehouseB: "",
                            warehouseC: "",
                            warehouseD: "",
                            warehouseE: "",
                            warehouseF: "",
                            warehouseG: "",
                            warehouseH: "",
                            warehouseI: "",
                            warehouseJ: "",
                            coalA: "",
                            coalB: "",
                            coalC: "",
                            coalD: "",
                            cementAa: "",
                            cementAb: "",
                            cementAc: "",
                            cementAd: "",
                            cementAe: "",
                            cementAf: "",
                            cementAg: "",
                            cementBa: "",
                            cementBb: "",
                            cementBc: "",
                            cementBd: "",
                            cementBe: "",
                            cementBf: "",
                            cementBg: "",
                            additive: ""
                        }
                    }).catch((err) => {
                        console.log("NoOK");
                        console.log(err);
                    });


                }
            },
            mounted() {

            }
        })
    </script>


</body>

</html>